/* Copyright 2019 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* This file should contain style used on desktop but not Android or iOS. */

:root {
  --google-grey-500: 154, 160, 166;
  --google-grey-700: 95, 99, 104;
  --google-grey-800: 60, 64, 67;
}

fieldset {
  background: transparent;
  border: none;
}

#main-content h1 {
  font-size: 1.5em;
}

#main-content #article-header {
  margin-top: 32px;
}

.screen-reader-only {
  border: none;
  color: transparent;
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  user-select: none;
}

#main-content {
  margin-bottom: 1em;
  max-width: 100%;
  padding: 0 1em;
  width: 35em;
}

#settings-container {
  border-bottom: thin solid gray;
  display: flex;
  flex: 1 1 auto;
  height: 36px;
  justify-content: flex-end;
}

#settings-container button {
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgb(var(--google-grey-700));
}

#settings-container button .material-icons {
  user-select: none;
}

#settings-container button.activated {
  background-color: rgba(0, 0, 0, .1);
}

.dark #settings-container button.activated {
  background-color: rgba(255, 255, 255, .1);
}

#settings-container button:focus {
  background-color: rgba(95, 99, 104, .2);
  box-shadow: 0 0 0 8px rgba(95, 99, 104, .2);
  outline: none;
}

#settings-container button#settings-toggle {
  border-radius: 16px;
}

.dark #settings-toggle {
  color: #E0E0E0;
}

#settings-dialog {
  border: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
              0 4px 8px 3px rgba(60, 64, 67, 0.15);
  box-sizing: border-box;
  color: rgb(var(--google-grey-800));
  font-family: 'Roboto Regular', 'Roboto', sans-serif;
  font-size: 13px;
  height: 168px;
  padding: 16px;
  position: fixed;
  top: 0;
  width: 320px;

  /* The z-index is set so that any 'positioned' elements in the article text
   * (e.g. footnotes) are rendered below the dialog. */
  z-index: 1;
}

#settings-header h1 {
  font-size: 15px;
}

#settings-dialog::backdrop {
  display: none;
}

#dialog-backdrop {
  bottom: 0;
  display: none;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
}

#settings-header {
  margin-bottom: 16px;
}

#settings-header > * {
  display: inline;
}

#close-settings-button {
  height: 18px;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 18px;
}

#close-settings-button > * {
  font-size: 18px;
  margin: 0;
}


#settings-fields {
  display: grid;
  grid-row-gap: 12px;
  grid-template:
    'style color' 32px
    'size size'  32px
    / 50% 50%;
  width: 100%;
}

.font-family-container {
  position: relative;
}

select#font-family-selection {
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid silver;
  border-radius: 2px;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  height: 32px;
  padding: 0 8px 0 8px;
  width: 100%;
}

#arrow-drop-down {
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 4px;
}

select#font-family-selection:focus {
  outline-color: rgb(var(--google-blue-600));
}

#theme-selection ul {
  column-gap: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  list-style-type: none;
  margin-inline-start: 16px;
}

.theme-option {
  display: block;
  height: 32px;
  position: relative;
  width: 32px;
}

.theme-option input[type='radio'] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgb(var(--google-grey-500));
  border-radius: 50%;
  height: 32px;
  margin: 0;
  padding: 0;
  width: 32px;
}

.theme-option input[type='radio']:focus {
  border: 2px solid rgb(var(--google-blue-600));
  outline: none;
}

.checkmark {
  bottom: -3px;
  display: none;
  height: 16px;
  position: absolute;
  right: -3px;
  width: 16px;
}

.checkmark .material-icons {
  background-color: white;
  border-radius: 50%;
  color: rgb(var(--google-blue-600));
  font-size: 16px;
  user-select: none;
}

.theme-option input[type='radio']:checked + .checkmark {
  display: inline;
}

#font-size-wrapper {
  grid-area: size;
  padding: 0 8px;
}

#font-size-selection {
  --fontSizePercent: 22%;
  -webkit-appearance: none;
  background: transparent;
  margin: 0;
  width: 100%;
}

#font-size-selection:focus {
  outline: none;
}

#font-size-selection::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: rgb(var(--google-blue-600));
  border-radius: 50%;
  height: 10px;

  /* Position the thumb over the slider track. */
  margin-top: -4px;

  position: relative;
  width: 10px;

  /* Render the thumb on top of the tickmarks. We can't just rearrange the HTML
   * because the tickmarks need to render above the slider's track but below the
   * thumb. */
  z-index: 1;
}

#font-size-selection:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 11px rgba(var(--google-blue-600), .2);
}

#font-size-selection::-webkit-slider-container {
  /* Increase the clickable area of the slider. */
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}

#font-size-selection::-webkit-slider-runnable-track {
  /* Make the track opaque blue to the left of the thumb and mostly transparent
   * to the right of the thumb. */
  background: linear-gradient(
    to right,
    rgb(var(--google-blue-600)),
    rgb(var(--google-blue-600)) var(--fontSizePercent),
    rgba(var(--google-blue-600), .2) var(--fontSizePercent),
    rgba(var(--google-blue-600), .2));

  height: 2px;
  width: 100%;
}

.tickmarks {
  display: flex;
  height: 2px;
  justify-content: space-between;

  /* Position the tickmarks over the slider track. */
  margin-top: -19px;

  /* Restrict the height of individual options to that of their containing
   * datalist. Setting the height property directly does not seem to have an
   * impact. */
  overflow: hidden;

  padding-top: 0;
  width: 100%;
}

.tickmarks option {
  padding: 0;
  width: 2px;
}

.tickmarks option.before-thumb {
  background: white;
}

.tickmarks option.after-thumb {
  background: rgb(var(--google-blue-600));
}

.label-container {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  padding-top: 8px;
}
